<template>
  <h2>{{ msg }}</h2>
  <h3>{{ state.msga }}</h3>
  <h3>{{ msga }}</h3>
  <input type="text" v-model="state.msga" />
  <input type="text" v-model="msga" />
  <input type="text" v-model="name" />
  <button @click="sayHello">点我试试</button>

  <h2>{{ name }}</h2>
  <hr>
  <h1>读取store全局状态管理里面的数据：{{ $store.state.userName }}</h1>

  <hr>
  <div>
    <button @click="gotoProTv">点击跳转到 pro/tv</button>
  </div>
</template>

<script>
// 我们现在是 Hooks 编程，函数式编程
// Vue3 是基于 Hooks 进行函数式编程，所有的都将会变成一个一个的函数
// onMounted onUnmounted  所以对你而言 学习 Vue3 就是 学习了一个一个的函数名而已
import { defineComponent, reactive, onMounted, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
  setup() {
    // 创建一个响应式数据对象，调用 对应的 Hooks，修改后会触发 DOM 更新
    // 数据劫持  观察者模式  vue2 使用 defineProperty ，Vue3 使用 Proxy
    // 其本质上来讲是一样的逻辑  getter setter 进行数据劫持
    // 我们工作中，更推荐使用 ref 来声明响应式数据对象
    // 但是，我们使用 reactive 性能更好！reactive 和 ref 创建的响应式数据对象有什么区别？
    const state = reactive({
      msga: '前端老兵'
    })

    // 第二种方法使用 ref 创建一个响应式数据对象
    const name = ref("黑猫警长")

    onMounted(() => {
      console.log("挂载成功了！");
    })

    // 这是一个普通对象，修改后不会触发 DOM 更新
    let msg = "前端老兵"
    const sayHello = () => {
      console.log("你好，中国！");
      state.msga = "哈哈";
      msg = "嘿嘿";
      // 使用 ref 创造的响应式数据对象，js 中的操作都必须调用 value 属性
      name.value = "金刚葫芦娃";
    }

    const router = useRouter()
    const gotoProTv = () => {
      // this.$router.push('/pro/tv')
      // router.push('/pro/tv')
      // 路由传参 三种方式
      // 基于 query 查询字符串 传参
      // router.push("/login?name=haha&age=18")
      // 基于 params 显式传参
      // 基于 params 隐式传参 刷新页面后丢失数据，所以在 Vue3 中会取消
      router.push({
        name: 'login',
        params: {
          name: '前端老兵'
        }
      })
    }

    // 切记，如果没有使用 语法糖的模式，要想在模板中调用 属性或者方法 都必须要 return 出去
    // 因为项目中涉及到的 属性方法往往很多，所以这个 return 很容易变的很长，叫做 意大利面条
    // 后续我们使用  setup 语法糖的模式进行开发
    return {
      msg,
      state,
      // 如果使用这种方法进行 return 出去，那么就读取了 state.msga 的值
      // 这个值并不是响应式数据对象，state 是响应式数据对象
      // msga: state.msga,
      ...toRefs(state),
      sayHello,
      name,
      gotoProTv
    }
  },
  beforeRouteEnter(to, from, next){
    console.log(to, from);
    next();
  }
})
</script>

<style lang="scss" scoped></style>